<template>
    <div class="line-list">
        <div class="line-list-item" v-for="(item, index) in list" :key="index">
            <div class="list-item-box">
                <img class="list-item-img" :src="item.img" />
            </div>
            <p class="list-item-tle">{{item.title}}</p>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Phrase',
        props: {
            list: Array
        },
    }
</script>
<style>
.line-list{display: flex;flex-wrap: wrap;max-width: 1200px;padding: 20px 15px;margin:auto;}
.line-list-item{width:calc(33% - 18px);min-width: 130px;text-align: center;margin-left:10px;margin-right:10px;margin-bottom:15px;border-radius: 6px;box-shadow: 0 6px 20px rgba(11,50,83,.2);}
.list-item-box{width:100%;height:calc(100% - 55px);overflow: hidden;border-radius: 6px 6px 0 0;}
.list-item-img{width:100%;transform: scale(1);transition:all .3s ease-in-out;}
.line-list-item:hover .list-item-img{transform: scale(1.2);}
.list-item-tle{font-weight:bold;padding-top:15px;padding-bottom:15px;}
@media only screen and (max-width:680px){
    .line-list-item{width:calc(50% - 20px);margin-left:6px;margin-right:6px;}
}
</style>
